<!DOCTYPE html>
<html lang="en">

<head>
    <!--1. 在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
    <!--2. 作业： 上一节课基础上，添加  新增 和 删除的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>goodslist</title>
    <style>
        #main {
            margin: 0 auto;
            display: flex;
            width: 64vw;
            flex-wrap: wrap;
            justify-content: space-between;
            /* background-color: aqua; */
        }

        .goods {
            width: 30vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* background-color: blue; */
        }
        .pl{
            width: 30vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .soldout h2{
            
            width: 30vw;
            height: 10vw;
            margin: 0 auto;
            background-color: rgba(240, 58, 94, 0.788);
        }
       
        img {
            width: 100%;
            height: 100%;
        }

        p {
            width: 100%;
            height: 4vw;
            font-size:2vw;
            line-height: 3vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <h1>商品列表</h1>
    <div id="main">
        <div v-for="(item,index) in goodslist" class="goods">
            <div class="pl" v-if="item.goodsNum">
            <img v-bind:src=item.urlImg>
            <p>{{item.title}}</p>  <span>库存: {{item.goodsNum}}</span> 
          <div> 选购数量: <input v-model="item.changeval" type="text" @input="change"> <button v-bind:gid=item.gid  @click="addgoods($event)">新增</button> <button v-bind:gid=item.gid @click="deletegoods($event)">删除</button> </div>  
            <span>{{item.price}}</span>
            </div>
            <div class="soldout" v-else>
               <h2>没了</h2> 
            </div>
        </div>
</body>
<script>
    let goodsModel = {

    data() {
            return {

        goodslist: [{
                        gid:0,
                        urlImg:"./zelda.webp",
                        title:"塞尔达王国之泪",
                        goodsNum:5,
                        changeval:"0",
                        price:"389"
                },
                {       gid:1,
                        urlImg:"./zelda.webp",
                        title:"塞尔达王国之泪",
                        goodsNum:100,
                        changeval:"0",
                        price:"389"
                },
                {       gid:2,
                        urlImg:"./zelda.webp",
                        title:"塞尔达王国之泪",
                        goodsNum:100,
                        changeval:"0",
                        price:"389"
                }
                ]
            }
        },
        methods:{
          change:function (){
          for (let val of this.goodslist) {
            //需大于求
              val.goodsNum=val.goodsNum-Number(val.changeval)<0?0:(val.goodsNum-Number(val.changeval));
          }
          },
          addgoods:function(event){
          let addgid=event.currentTarget.getAttribute('gid')
          for (let val of this.goodslist) {
            if(addgid==val.gid){
                val.goodsNum++;
            }
              
          }
          },
          deletegoods:function(event){
            let degid=event.currentTarget.getAttribute('gid')
            for (let val of this.goodslist) {
            if(degid==val.gid){
                val.goodsNum--;
            }
              
          }
          }
        }
    }

    let app = Vue.createApp(goodsModel)
    app.mount("#main")
</script>

</html>